<template>
  <div>
    <div class="search_condition_bar">
      <el-col :span="24" class="warp-breadcrum">
        <!--搜索栏-->
        <el-col :span="24" class="toolbar">
          <el-form :inline="true" @submit.native.prevent>
            <el-form-item label="角色名">
              <el-input clearable v-model="roleNameQry" placeholder="角色名" @change="queryRolesInner"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.prevent="queryRoles">查询</el-button>
              <el-button type="primary" @click.prevent="queryRolesInner">刷新</el-button>
              <el-button type="primary" @click.prevent="newRolePre">新增</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-col>
    </div>

    <hr />
    <el-col :span="24" class="toolbar block">
      <!--数据分页
            layout：分页显示的样式
            :page-size：每页显示的条数
            :total：总数
            具体功能查看地址：http://element.eleme.io/#/zh-CN/component/pagination
      -->
      <el-pagination
        layout="total,prev,pager,next,jumper"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-size="pageSize"
        :total="totalElements"
        background
        :hide-on-single-page="false"
        style="text-align: center;"
      ></el-pagination>
    </el-col>
    <div class="search_result_list">
      <el-table :data="roles" stripe border v-loading="listLoading" @row-dblclick="showRoleDetails">
        <el-table-column
          type="index"
          :index="index"
          label="序号"
          width="69px"
          align="center"
          header-align="center"
        ></el-table-column>
        <el-table-column prop="name" label="角色名" width="200px" header-align="center" align="center"></el-table-column>

        <el-table-column prop="description" label="角色描述" header-align="center" align="center"></el-table-column>
        <el-table-column label="修改权限" width="80px" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
              title="修改权限"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="permissionModifyPre(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="修改菜单" width="80px" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
              title="修改菜单"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="menuModifyPre(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="删除角色" width="80px" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
              title="删除角色"
              type="primary"
              icon="el-icon-delete"
              circle
              @click="roleDelete(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- permission modify dialog -->
    <el-dialog
      :title="permissionDialogTitle"
      @close="modifyPermissionDialogClose"
      :visible.sync="permissionDialogVisible"
    >
      <el-form :data="allPermissions">
        <el-checkbox-group v-model="permissions">
          <el-checkbox
            style="display:block;"
            v-for="permission in allPermissions"
            :key="permission.id"
            :label="permission.id"
          >{{permission.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="permissionModify">修 改</el-button>
        <el-button type="info" @click="permissionDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- menu modify dialog -->
    <el-dialog
      :title="menuDialogTitle"
      @close="modifyMenuDialogClose"
      :visible.sync="menuDialogVisible"
    >
      <el-form :data="allMenus">
        <el-checkbox-group v-model="menus" size="mini">
          <el-checkbox
            style="display:block;"
            v-for="menu in allMenus"
            :key="menu.id"
            :label="menu.id"
          >{{menu.alias}}</el-checkbox>
        </el-checkbox-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="menuModify">修 改</el-button>
        <el-button type="info" @click="menuDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 新增角色弹框 -->
    <el-dialog
      title="新增角色"
      @close="addDialogClose"
      :visible.sync="addDialogVisible"
      :close-on-click-modal="false"
    >
      <!-- 新增角色的表单 -->
      <el-form :model="addRoleModel" label-width="100px">
        <el-form-item prop="name" label="角色名称">
          <el-input v-model="addRoleModel.name"></el-input>
        </el-form-item>
        <el-form-item prop="description" label="角色描述">
          <el-input v-model="addRoleModel.description"></el-input>
        </el-form-item>

        <div style="float: left">
          <el-form-item prop="permissions" label="角色权限: " label-width="100px" style="width: 240px;">
            <el-checkbox-group v-model="addRoleModel.permissions">
              <el-checkbox
                style="display:block;"
                v-for="permission in allPermissions"
                :key="permission.id"
                :label="permission.id"
              >{{permission.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <div style="float: left">
          <el-form-item prop="menus" label="角色菜单: " label-width="100px" style="width: 240px;">
            <el-checkbox-group v-model="addRoleModel.menus" size="mini">
              <el-checkbox
                style="display:block;"
                v-for="menu in allMenus"
                :key="menu.id"
                :label="menu.id"
              >{{menu.alias}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <div style="display: inline-block;">
          <el-form-item style="text-align: center;">
            <el-button @click="addDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="newRole">确定</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>

    <!-- role detail dialog -->
    <el-dialog title="角色详情" :visible.sync="roleDetailDialogVisible">
      <el-card>{{this.currentRoleString}}</el-card>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" @click="roleDetailDialogVisible = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "roleMgmt",
  data() {
    return {
      listLoading: false,
      pageNo: 1,
      pageSize: 10,
      totalElements: 0,

      roleNameQry: "",
      roleName: "",
      roles: [],

      permissionDialogVisible: false,
      allPermissions: [],
      permissions: [],

      menuDialogVisible: false,
      allMenus: [],
      menus: [],

      roleDetailDialogVisible: false,
      currentRoleString: "",

      addDialogVisible: false,
      addRoleModel: {
        name: "",
        description: "",
        permissions: [],
        menus: []
      }
    };
  },
  computed: {
    permissionDialogTitle: function() {
      return "修改角色权限--" + this.roleName;
    },
    menuDialogTitle: function() {
      return "修改角色菜单--" + this.roleName;
    }
  },

  mounted() {
    this.queryRoles();
  },

  methods: {
    queryRoles: function() {
      this.pageNo = 1;
      this.queryRolesInner();
    },
    queryRolesInner: function() {
      this.listLoading = true;
      this.$api.role
        .queryRolesPage(this.roleNameQry, this.pageNo, this.pageSize)
        .then(res => {
          this.listLoading = false;
          if (!res) {
            return;
          }

          this.totalElements = res.body.totalElements;
          this.roles = res.body.list;
        });
    },
    permissionModifyPre: function(row) {
      let roleName = row.name;
      this.$api.rolePermission
        .queryPermissionsByRoleName(roleName)
        .then(res => {
          if (!res) {
            return;
          }

          this.permissions = res.body.havingPermissionsIds;
          this.allPermissions = res.body.allPermissions;
          this.roleName = roleName;
          this.permissionDialogVisible = true;
        });
    },

    permissionModify: function() {
      this.$api.rolePermission
        .modifyRolePermissions({
          roleName: this.roleName,
          permissions: this.permissions
        })
        .then(res => {
          if (!res) {
            return;
          }

          this.permissionDialogVisible = false;
          this.$message({
            type: "success",
            message: "角色权限修改成功"
          });
        });
    },
    menuModifyPre: function(row) {
      let roleName = row.name;
      this.$api.roleMenu.queryMenusByRoleName(roleName).then(res => {
        if (!res) {
          return;
        }

        this.menus = res.body.havingMenusIds;
        this.allMenus = res.body.allMenus;
        this.roleName = roleName;
        this.menuDialogVisible = true;
      });
    },

    menuModify: function() {
      this.$api.roleMenu
        .modifyRoleMenus({
          roleName: this.roleName,
          menus: this.menus
        })
        .then(res => {
          if (!res) {
            return;
          }

          this.menuDialogVisible = false;
          this.$message({
            type: "success",
            message: "角色菜单修改成功"
          });
        });
    },

    newRolePre: function() {
      this.addDialogVisible = true;
      this.$api.permission.queryPermissions().then(res => {
        if (!res) {
          return;
        }

        this.allPermissions = res.body;
      });

      this.$api.menu.queryFirstMenus().then(res => {
        if (!res) {
          return;
        }

        this.allMenus = res.body;
      });
    },
    newRole: function() {
      this.$api.role.newRole(this.addRoleModel).then(res => {
        if (!res) {
          return;
        }

        this.addDialogVisible = false;
        this.queryRolesInner();
        this.$message({
          type: "success",
          message: "角色新增成功"
        });
      });
    },

    roleDelete: function(row) {
      this.$confirm("此操作将删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api.role.deleteRole(row).then(res => {
            if (!res) {
              return;
            }

            this.queryRolesInner();
            this.$message({
              type: "success",
              message: "角色删除成功"
            });
          });
        })
        .catch(() => {});
    },

    modifyPermissionDialogClose: function() {
      this.permissions = [];
    },

    modifyMenuDialogClose: function() {
      this.menus = [];
    },

    addDialogClose: function() {
      this.addRoleModel = {
        name: "",
        description: "",
        permissions: [],
        menus: []
      };
    },

    showRoleDetails: function(row) {
      this.currentRoleString = row.name + " | " + row.description;
      this.roleDetailDialogVisible = true;
    },

    //点击分页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.queryRolesInner();
    },

    index: function(idx) {
      return idx + 1 + (this.pageNo - 1) * this.pageSize;
    }
  }
};
</script>

<style scoped>
.search_condition_bar {
  padding-top: 10px;
}
.search_result_list {
  margin-top: -8px;
  margin-left: -14px;
}

hr {
  margin-left: -15px;
}

.el-checkbox {
  margin-top: 10px;
}
</style>